<template>
	<view class="wf-box">
		<view class="head" :style="{ paddingTop: navBarHeight }">
			<view class="head-np">
				<view class="back" @click="back()">
					<image src="../../static/img/chat-09.png"></image>
				</view>
				<!-- @click="openWalletPopup()" -->
				<view class="title">
					<!-- <view> -->
					<text>{{ curWallet }}</text>
					<!-- <text class="drop"></text> -->
					<!-- </view> -->

				</view>
				<view class="set-icon" @click="jumpSet">
					<image src="../../static/img/me-17.png"></image>
				</view>
			</view>
		</view>

		<view class="main" :style="{ paddingTop: navBarHeight }">
			<view class="abe-box">
				<view class="e-wallet">
					<view class="fl-tp">
						<view class="fl-ls" @click="copy(userInfo.bepAddress)">
							<view class="ls-code">{{userInfo.bepAddress}}</view>
							<view class="ls-copy">
								<image src="../../static/img/me-19.png"></image>
							</view>
						</view>
						<view class="fl-rm" @click="selectNetwork">
							<text>{{ curText }}</text>
							<image src="../../static/img/me-20.png"></image>
						</view>
					</view>
					<view class="fl-dp">${{walletInfo.usdlBalance}}</view>
					<view class="txed" @click="txed()">提现额度：{{walletInfo.usdtWdLimit}}</view>
				</view>

				<view class="e-uses">
					<view class="e-uses-item">
						<image src="../../static/img/me-23.png" mode="widthFix"></image>
						<text>扫一扫</text>
					</view>

					<view class="e-uses-item" @click="openPopup">
						<image src="../../static/img/me-76.png" mode="widthFix"></image>
						<text>提现</text>
					</view>

					<view class="e-uses-item" @click="jumpCollection">
						<image src="../../static/img/me-25.png" mode="widthFix"></image>
						<text>收款</text>
					</view>

					<view class="e-uses-item" @click="jumpHistory">
						<image src="../../static/img/me-26.png" mode="widthFix"></image>
						<text>历史记录</text>
					</view>

					<view class="e-uses-item" @click="huanz()">
						<image src="../../static/img/me-77.png" mode="widthFix"></image>
						<text>划转</text>
					</view>
				</view>
			</view>

			<view class="abd-box">

				<view class="abd-tit">
					<view class="abd-tit-scroll">
						<!-- @scroll="scroll" -->
						<scroll-view class="scroll-view-x" scroll-x="true">
							<view class="scroll-view-item">
								<view class="tit-item-rp tit-item-act">
									<view>资产</view>
								</view>
							</view>
							
							<!-- <view class="scroll-view-item" v-for="item in 9">
								<view class="tit-item-rp">
									<view>NFTS</view>
								</view>
							</view> -->
							
						</scroll-view>

					</view>
					
					<view class="abd-tit-add" @click="jumpAddToken">
						<image src="../../static/img/me-28.png"></image>
					</view>
				</view>
				
				<view class="abd-list">
					<!-- @scrolltolower="lower" -->
					<scroll-view scroll-y="true" class="scroll-Y">
						<view class="abd-coin-im" v-for="item in 1">
							<image src="../../static/img/token_1.png"></image>
							<text class="coin-name">USDT(BEP20)</text>
							<text class="coin-num">{{walletInfo.usdlBalance}}</text>
						</view>
					</scroll-view>
				</view>
				
			</view>
			
		</view>
		
		
		<uni-popup ref="popup" background-color="transparent" border-radius="8px 8px 0 0" type="bottom">
			<view class="network-box">
				<view class="network-title">选择网络 <image src="../../static/img/me-21.png" @click="closePopup()"></image>
				</view>

				<view class="network-scroll">
					<scroll-view scroll-y="true" class="scroll-Y" @scrolltolower="lower">
						<view class="scroll-view-item" v-for="item in coinList" @click="selectCoin(item)">
							<image src="../../static/img/demo-03.png" class="coin-img"></image>
							<!-- <text>Binance(BSC)</text> -->
							<text>{{ item.text }}</text>
							<view class="status">
								<image src="../../static/img/chat-08.png" v-if="curId != item.id"></image>
								<image src="../../static/img/chat-07.png" v-else></image>
							</view>

						</view>
					</scroll-view>
				</view>

				<view class="network-add">
					<view class="network-btn" @click="jumpMainnet()">
						<view>
							<image src="../../static/img/me-22.png"></image>
							<text>添加主网</text>
						</view>
					</view>

				</view>
			</view>
		</uni-popup>

		<uni-popup ref="popup2" background-color="transparent" type="bottom">
			<view class="wallet-box">
				<view class="wallet-title">钱包 <image src="../../static/img/me-21.png" @click="closePopup()" />
				</view>
				<view class="wallet-asset">
					<view class="ast-f">资产总值</view>
					<view class="ast-v">$0.00</view>
				</view>

				<view class="wallet-scroll">
					<scroll-view scroll-y="true" class="scroll-Y">
						<view class="scroll-view-item" v-for="(item,index) in 4" @click="selectWallet(index)">
							<view class="status">
								<image src="../../static/img/chat-08.png"></image>
								<!-- <image src="../../static/img/chat-07.png"></image> -->
							</view>
							<image src="../../static/img/demo-04.png" class="wallet-img"></image>
							<view class="wallet-fl">

								<view>
									<text>Wallet</text>
									<text v-if="index != 0" style="margin-left: 10rpx;">{{ index + 1 }} </text>
								</view>

								<text>0x6c9221...01Ee96c23C5BFAC</text>
							</view>
							<image src="../../static/img/chat-20.png" class="more-img"></image>
						</view>
					</scroll-view>
				</view>

				<view class="wallet-add">
					<view class="wallet-btn" @click="addWallet">
						<view>
							<image src="../../static/img/me-22.png"></image>
							<text>添加钱包</text>
						</view>
					</view>
				</view>

			</view>
		</uni-popup>

		<uni-popup ref="popup3" background-color="transparent" type="bottom">
			<view class="add-box">
				<view class="add-title"></view>
				<view class="add-pd">
					<view class="opt-item" @click="jumpManageWallet">
						注册
					</view>
					<view class="opt-item">
						导入钱包
					</view>
				</view>
			</view>
		</uni-popup>
	
		<uni-popup ref="popup4" background-color="transparent" border-radius="8px 8px 0 0" type="bottom">
			<view class="network-box transit">
				<view class="network-title">选择通证 <image src="../../static/img/me-21.png" @click="closePopup()"></image>
				</view>
				
				<view class="transit-search">
					<image src="../../static/img/search.png"></image>
					<input type="text" placeholder="搜索 token">
				</view>
		
				<view class="network-scroll">
					<scroll-view scroll-y="true" class="scroll-Y" @scrolltolower="lower">
						<!-- <view class="scroll-view-item" v-for="item in coinList" @click="jumpBsc(item)">
							<image src="../../static/img/demo-03.png" class="coin-img"></image>
							<text>{{ item.text }}</text>
							<view class="status">0</view>
						</view> -->
						<view class="scroll-view-item" @click="jumpBsc(item)">
							<image src="../../static/img/token_1.png" class="coin-img"></image>
							<text>USDT</text>
							<view class="status">0</view>
						</view>
						<view class="scroll-view-item" @click="jumpBsc(item)">
							<image src="../../static/img/baro_01.png" class="coin-img"></image>
							<text>CC</text>
							<view class="status">0</view>
						</view>
					</scroll-view>
				</view>
			</view>
		</uni-popup>
		<uni-popup ref="popup5" type="center">
			<view class="popup-box">
				<view class="popup-title">划转</view>
				<!-- <view class="popup-sub">确认要删除本条草稿动态</view> -->
				<view class="popup-text">USDT余额：{{walletInfo.usdlBalance}} </view>
				<input type="number" placeholder="请输入划转金额" v-model="h_num" />
				<view class="popup-footer">
					<view class="cancle" @click="closePopup()">取消</view>
					<view class="confim" @click="confim()">确定</view>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import { getWalletInfoApi,fundTransfer,getMeUserAPI } from "@/api/api.js"
	import navBarMixin from '@/mixin/navBarMixin.js'
	export default {
		data() {
			return {
				curWallet: 'Wallet',
				curId: 1,
				curText: 'Binance(BSC)',
				coinList: [{
					id: 1,
					text: 'Binance(BSC)'
				}],
				walletInfo: "",
				userInfo: "",
				// walletList: [{
				// 	id: 1,
				// 	text: '0x6c9221...01Ee96c23C5BFAC'
				// }]
			}
		},
		mixins: [navBarMixin],
		onShow() {
			this.getWallinfo()
			this.getMeUserInfo()
		},
		methods: {
			txed() {
				uni.navigateTo({
					url: '/pages/me/extractveTem?type=21'
				})
			},
			copy(e) {
				uni.setClipboardData({
					data: e,
					success: function() {
						uni.showToast({
							title: '复制成功',
							icon: 'none'
						})
					}
				})
			},
			async getMeUserInfo() {
				const res = await getMeUserAPI()
				if(!res.code) {
					this.userInfo = res.data
				}
			},
			confim() {
				fundTransfer({
					amount:this.h_num,
					type: 1
				}).then(res=>{
					console.log();
					if (res.code==0) {
						uni.showToast({
							title: '划转成功!' ,
							icon: 'none',
							duration: 2000,
						})
						this.getWallinfo()
					}else {
						uni.showToast({
							title: res.msg,
							icon: 'none',
							duration: 3000,
						})
					}
					this.closePopup()
					this.h_num = ''
				})
			},
			async getWallinfo() {
				const res = await getWalletInfoApi()
				if(!res.code) {
					this.walletInfo = res.data
					// if(!this.walletInfo.isBindOtc) {
					// 	this.$refs.moneyPop.open()
					// }
					
				}
			},
			huanz() {
				this.$refs.popup5.open()
				// uni.showToast({
				// 	title:'暂未开放',
				// 	icon:'none'
				// })
			},
			back() {
				uni.navigateBack()
			},
			jumpSet() {
				uni.navigateTo({
					url: '/pages/me/walletSet'
				})
			},
			openPopup() {
				// this.$refs.popup4.open()
				uni.navigateTo({
					url: '/pages/me/extractive?yue='+this.walletInfo.usdlBalance
				})
			},
			// lower() {
			// 	console.log('123')
			// },
			selectNetwork() {
				this.$refs.popup.open()
			},
			selectCoin(cut) {
				const { id, text } = cut
				this.curId = id
				this.curText = text
				this.$refs.popup.close()
			},
			
			jumpBsc() {
				this.closePopup()
				uni.navigateTo({
					url: '/pages/me/bsc'
				})
			},
			
			jumpCollection() {
				uni.navigateTo({
					url: '/pages/me/collection'
				})
			},
			jumpHistory() {
				uni.navigateTo({
					url: '/pages/me/history'
				})
			},
			
			jumpAddToken() {
				uni.navigateTo({
					url: '/pages/me/addToken'
				})
			},
			
			selectWallet(index) {
				// if (!index) return
				const strIndex = index ? index + 1 : ''
				this.curWallet = 'Wallet' + strIndex
				this.$refs.popup2.close()
			},

			// 添加钱包
			addWallet() {
				this.$refs.popup2.close()
				this.$refs.popup3.open()
			},
			
			jumpManageWallet() {
				this.$refs.popup3.close()
				
				uni.navigateTo({
					url: '/pages/me/manageWallet'
				})
			},
			
			jumpMainnet() {
				uni.showToast({
					title:'暂未开放',
					icon:'none'
				})
				// this.$refs.popup.close()
				
				// uni.navigateTo({
				// 	url: '/pages/me/mainnet'
				// })
			},

			openWalletPopup() {
				// this.$refs.popup2.open()
			},

			closePopup() {
				this.$refs.popup.close()
				this.$refs.popup2.close()
				this.$refs.popup4.close()
				this.$refs.popup5.close()
			}
		}
	}
</script>

<style lang="scss" scoped>
	.wf-box {
		padding-bottom: 60rpx;
		overflow: hidden;

		.back {
			image {
				width: 20rpx;
				height: 37rpx;
			}
		}

		.head {
			position: fixed;
			z-index: 1;
			width: 100%;
			background: #fff;

			.head-np {
				display: flex;
				justify-content: space-between;
				align-items: center;
				width: 100%;
				height: 96rpx;
				padding: 0 30rpx;
				box-sizing: border-box;

				.title {
					// width: 186rpx;
					height: 70rpx;
					line-height: 70rpx;
					// text-align: center;
					padding: 0 20rpx;
					// padding-right: ;
					font-size: 36rpx;
					font-weight: bold;
					background: #F2F2F2;
					border-radius: 34rpx;
					box-sizing: border-box;
					display: flex;
					align-items: center;


					// &>view {
					// position: relative;

					.drop {
						// position: absolute;
						// right: 0;
						// top: 50%;
						margin-left: 8rpx;
						border-top: 10rpx solid #333;
						border-bottom: 10rpx solid transparent;
						border-left: 10rpx solid transparent;
						border-right: 10rpx solid transparent;
						transform: translateY(50%);
					}

					// }
				}

				.set-icon {
					image {
						width: 48rpx;
						height: 48rpx;
					}
				}
			}

		}

		.main {
			margin-top: 126rpx;
			padding: 0 30rpx;

			.abe-box {
				border-radius: 20rpx;
				background: #fff;
				overflow: hidden;

				.e-wallet {
					height: 230rpx;
					padding: 40rpx 30rpx;
					background: url('../../static/img/me-18.png') no-repeat;
					background-size: 100% 100%;
					box-sizing: border-box;
					position: relative;
					.txed {
						font-size: 28rpx;
						position: absolute;
						color: white;
						right: 30rpx;
						bottom: 26rpx;
					}

					.fl-tp {
						display: flex;

						.fl-ls {
							display: flex;

							.ls-code {
								width: 200rpx;
								white-space: nowrap; /* 确保文本在一行内显示 */
								overflow: hidden; /* 超出容器的文本隐藏 */
								text-overflow: ellipsis; /* 超出部分显示省略号 */
								color: #fff;
							}

							.ls-copy {
								margin-left: 25rpx;

								image {
									width: 40rpx;
									height: 40rpx;
								}
							}
						}

						.fl-rm {
							height: 60rpx;
							line-height: 60rpx;
							padding: 0 18rpx;
							margin-left: auto;
							border: 2rpx solid #fff;
							display: flex;
							align-items: center;
							border-radius: 10rpx;

							text {
								font-size: 24rpx;
								color: #EEEEEE;
							}

							image {
								margin-left: 16rpx;
								height: 40rpx;
								width: 40rpx;
							}
						}
					}

					.fl-dp {
						margin-top: 36rpx;
						font-size: 60rpx;
						color: #fff;
					}
				}

				.e-uses {
					height: 168rpx;
					padding: 0 30rpx;
					display: flex;
					align-items: center;
					justify-content: space-between;
					box-sizing: border-box;

					.e-uses-item {
						font-size: 26rpx;
						image {
							display: block;
							margin: 0 auto 20rpx;
							width: 52rpx;
						}
						// image {
						// 	margin: 0 auto;
						// 	width: 56rpx;
						// 	height: 56rpx;
						// }
					}
				}
			}

			.abd-box {
				margin-top: 30rpx;
				min-height: 907rpx;
				padding: 22rpx 30rpx;
				box-sizing: border-box;
				background: url('../../static/img/me-27.png') no-repeat;
				background-size: 100% 100%;

				.abd-tit {
					display: flex;
					padding-bottom: 14rpx;
					// height: 95rpx;
					border-bottom: 2rpx solid #eee;

					.abd-tit-scroll {
						width: 90%;
						.scroll-view-x {
							width: 100%;
							// color: red;
							white-space: nowrap;

							::v-deep .uni-scroll-view-content {
								.scroll-view-item {
									display: inline-block;
									&:first-child {
										view {
											padding-left: 0;
										}
									}
								}
							}
						}
					}


					.tit-item-rp {
						padding: 0 40rpx;
						color: #999;
						font-size: 28rpx;
						view {
							padding: 14rpx 0;
						}

						&.tit-item-act {
							view {

								color: #333;
								font-weight: bold;
								position: relative;

								&::after {
									content: '';
									position: absolute;
									bottom: 0;
									left: 0;
									width: 100%;
									height: 4rpx;
									background: $theme-color-a;
									border-radius: 4rpx;
								}

							}
						}

					}
					
					.abd-tit-add {
						// width: 40rpx;
						width: 10%;
						display: flex;
						align-items: center;
						justify-content: center;
						image {
							width: 40rpx;
							height: 40rpx;
						}
					}

				}
				
				.abd-list {
					.scroll-Y {
						height: 860rpx;
						// height: 100%;
						overflow: hidden;
					}
					
					.abd-coin-im {
						height: 126rpx;
						display: flex;
						align-items: center;
						border-bottom: 2rpx solid #eee;
						
						image {
							width: 56rpx;
							height: 56rpx;
						}
						
						.coin-name {
							margin-left: 20rpx;
							color: #333;
							font-size: 28rpx;
						}
						.coin-num {
							margin-left: auto;
						}
					}
				}
			}

			// padding-bottom: 100rpx;
		}

		.network-box {
			min-height: 920rpx;
			background-color: #fff;
			border-radius: 24rpx 24rpx 0 0;
			overflow: hidden;

			.network-title {
				position: relative;
				height: 160rpx;
				line-height: 160rpx;
				text-align: center;
				color: #333;
				font-size: 32rpx;
				font-weight: bold;
				background: linear-gradient(180deg, #EBF3FF 0%, #FFFFFF 100%);

				image {
					position: absolute;
					width: 40rpx;
					height: 40rpx;
					right: 30rpx;
					top: 60rpx;
				}
			}

			.network-scroll {
				height: 504rpx;
				padding: 0 30rpx;

				.scroll-Y {
					height: 100%;
					overflow: hidden;
				}

				.scroll-view-item {
					height: 126rpx;
					display: flex;
					align-items: center;
					border-bottom: 2rpx solid #eee;

					.coin-img {
						width: 56rpx;
						height: 56rpx;
					}

					text {
						margin-left: 20rpx;
					}

					.status {
						margin-left: auto;

						image {
							width: 30rpx;
							height: 30rpx;
						}
					}


				}
			}

			.network-add {
				padding: 0 65rpx;
				margin-top: 90rpx;

				.network-btn {
					background: $theme-color-a;
					height: 80rpx;
					border-radius: 40rpx;
					display: flex;
					align-items: center;

					&>view {
						display: flex;
						align-items: center;
						width: max-content;
						margin: 0 auto;
						color: #fff;
						font-size: 28rpx;

						text {
							font-weight: bold;
							font-size: 28rpx;
						}

					}

					image {
						margin-right: 18rpx;
						width: 20rpx;
						height: 20rpx;
					}
				}

			}
			
			&.transit {
				min-height: auto;
				.transit-search {
					height: 80rpx;
					margin: 0 30rpx;
					background: #F4F4F4;
					border-radius: 40rpx;
					padding: 0 30rpx;
					display: flex;
					align-items: center;
					image {
						width: 48rpx;
						height: 48rpx;
					}
					input {
						flex: 1;
						margin-left: 20rpx;
						height: 100%;
					}
				}
				.network-scroll {
					height: auto;
				}
			}

		}

		.wallet-box {
			min-height: 920rpx;
			background-color: #fff;
			border-radius: 24rpx 24rpx 0 0;
			overflow: hidden;

			.wallet-title {
				position: relative;
				height: 160rpx;
				line-height: 160rpx;
				text-align: center;
				color: #333;
				font-size: 32rpx;
				font-weight: bold;
				background: linear-gradient(180deg, #EBF3FF 0%, #FFFFFF 100%);

				image {
					position: absolute;
					width: 40rpx;
					height: 40rpx;
					right: 30rpx;
					top: 60rpx;
				}
			}

			.wallet-asset {
				padding: 0 30rpx;

				.ast-f {
					color: #999;
					font-size: 28rpx;
				}

				.ast-v {
					margin-top: 30rpx;
					font-weight: bold;
					font-size: 60rpx;
				}
			}

			.wallet-scroll {
				padding: 0 30rpx;
				margin-top: 14rpx;
				height: 408rpx;

				.scroll-Y {
					height: 100%;
					overflow: hidden;

					.scroll-view-item {
						display: flex;
						align-items: center;
						height: 134rpx;
						border-bottom: 2rpx solid #eee;

						.status {
							display: flex;

							image {
								width: 30rpx;
								height: 30rpx;
							}
						}

						.wallet-img {
							width: 64rpx;
							height: 64rpx;
							margin: 0 20rpx;
						}

						.wallet-fl {
							display: flex;
							width: 502rpx;

							text {
								font-size: 28rpx;
								color: #333;
							}

							view {
								margin-right: 10rpx;
								padding-right: 10rpx;
								border-right: 2rpx solid #333;
							}
						}

						.more-img {
							margin-left: auto;
							width: 10rpx;
							height: 20rpx;
						}
					}
				}
			}

			.wallet-add {
				padding: 0 65rpx;
				margin-top: 50rpx;

				.wallet-btn {
					background: $theme-color-a;
					height: 80rpx;
					border-radius: 40rpx;
					display: flex;
					align-items: center;

					&>view {
						display: flex;
						align-items: center;
						width: max-content;
						margin: 0 auto;
						color: #fff;
						font-size: 28rpx;

						text {
							font-weight: bold;
							font-size: 28rpx;
						}

					}

					image {
						margin-right: 18rpx;
						width: 20rpx;
						height: 20rpx;
					}
				}
			}
		}

		.add-box {
			min-height: 300rpx;
			background-color: #fff;
			border-radius: 24rpx 24rpx 0 0;
			position: relative;
			overflow: hidden;

			.add-title {
				position: relative;
				height: 150rpx;
				line-height: 160rpx;
				text-align: center;
				color: #333;
				font-size: 32rpx;
				font-weight: bold;
				background: linear-gradient(180deg, #EBF3FF 0%, #FFFFFF 100%);
			}

			.add-pd {
				position: absolute;
				top: 100rpx;
				width: 100%;
				padding: 0 30rpx;
				box-sizing: border-box;

				.opt-item {
					height: 80rpx;
				}
			}
		}
		.popup-box {
			width: 583rpx;
			height: 630rpx;
			border-radius: 20rpx;
			box-sizing: border-box;
			background: #fff;
			background: url('../../static/img/me-32.png') no-repeat;
			background-size: cover;
			overflow: hidden;
			.popup-title {
				font-size: 32rpx;
				color: #333;
				font-weight: bold;
				text-align: center;
				margin-top: 180rpx;
			}
			.popup-text {
				margin: 40rpx 40rpx 0;
				font-size: 28rpx;
			}
			.popup-sub {
				margin-top: 46rpx;
				color: #666;
				font-size: 28rpx;
				text-align: center;
			}
			.popup-footer {
				display: flex;
				justify-content: space-between;
				margin: 72rpx 52rpx 0;
				.cancle {
					width: 200rpx;
					line-height: 76rpx;
					text-align: center;
					border: 2rpx solid #3F93FF;
					border-radius: 40rpx;
					color: #3F93FF;
				}
				.confim {
					width: 200rpx;
					line-height: 76rpx;
					text-align: center;
					border-radius: 40rpx;
					background: #3F93FF;
					color: #fff;
				}
			}
			input{
				// width: 500rpx;
				margin: 40rpx 40rpx 0;
				padding: 0 30rpx;
				height: 84rpx;
				font-size: 28rpx;
				line-height: 84rpx;
				background: #F4F4F4;
				border-radius: 6rpx 6rpx 6rpx 6rpx;
			}
		}
	}
</style>